<template>
    <div id="mayDayRecord">
      <h3 class="title">奖励领取记录</h3>
      <x-table class="tab_box" :cell-bordered="false" style="background-color:#fff;font-size:.25rem;">
        <thead>
          <tr>
            <th>奖励名称</th>
            <th>领奖时间</th>
            <th>领奖数量</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="recordList.length == 0" v-for="(record,index) in recordList" :key="index">
            <td>{{record.taskname}}</td>
            <td>{{record.recive_day}}</td>
            <td>{{record.reward_number}}</td>
            <td :class="{green:record.status == 1}">{{record.status == 1 ? '成功' : '失败'}}</td>
          </tr>
        </tbody>
      </x-table>
    </div>
</template>
<script>
import { XTable } from "vux";
import axios from "axios";
export default {
  data() {
    return {
      recordList: [] //记录列表
    };
  },
  created() {
    this.getRecord();
  },
  components: {
    XTable
  },
  methods: {
    getRecord() {
      this.apiService.Task.clubreceivelist().then(res => {
        this.recordList = res.data;
      });
    }
  }
};
</script>
<style scoped>
#mayDayRecord {
  height: 100%;
}
.title {
  font-size: 0.35rem;
  padding: 0.2rem 0.4rem;
  background-color: #fff;
}
.green {
  color: green;
}
.red {
  color: red;
}
</style>